<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非父子组件间传值(bus/总线)</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="root">
        <child countent="dell"></child>
        <child countent="Lee"></child>
    </div>
    <script>
        // 兄弟的之间的传值关键一步
        // 在Vue原型上挂载一个bus属性，同时将new Vue实例挂载到bus属性上
        Vue.prototype.bus = new Vue();
        // 创建子组件
        Vue.component("child", {
            // 创建模板
            template: "<div @click='handleChange'>{{selfCountent}}</div>",
            // 接收父组件传过来的countent的值，并设置起数据类型为字符串
            props: {
                countent: String
            },
            // 子组件中的data，必须是一个函数，return 返回一个对象
            data: function () {
                return {
                    selfCountent: this.countent  //拷贝父组件参数，以便修改，子组件用到content的地方修改为selfContent
                }
            },
            // 定义模板中事件方法
            methods: {
                handleChange: function () {
                    //进行广播
                    this.bus.$emit("change", this.selfCountent)
                }
            },
            // 在挂载渲染完成监控子组件暴露出来的事件，
            mounted: function () {
                var _this = this;//保存this指针，后续this.bus使得this.selfContent的this指向会改变
                //加载的时候就要进行接收
                this.bus.$on("change",function (msg) {
                    _this.selfCountent = msg;//子组件不可以更改父组件值，若需要改要拷贝值作为自己的属性值
                })
            }
        })
        var vm = new Vue({
            el: "#root"
        })
    </script>
</body>
</html>